<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>人事管理系统 ——公告管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	<link href="../css/css.css" type="text/css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="../js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
	<link href="../js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
	<script src="../js/ligerUI/js/core/base.js" type="text/javascript"></script>
	<script src="../js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
	<script src="../js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
	<script src="../js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
	<link href="../css/pager.css" type="text/css" rel="stylesheet"/>
</head>
<body>
	<!-- 导航 -->
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td height="10"></td>
		</tr>
		<tr>
			<td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
			<td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：公告管理 &gt; 公告查询</td>
			<td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
		</tr>
	</table>

	<table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
		<!-- 查询区  -->
		<tr valign="top">
			<td height="30">
				<table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
					<tr>
						<td class="fftd">

							<table width="100%" border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td class="font3">
										公告名称：<input type="text" id="title" name="title">
										公告内容：<input type="text" id="content" name="content">
										<input type="submit" value="搜索" onclick="search()"/>
										<input id="delete" type="button" value="删除"/>
									</td>
								</tr>
							</table>

						</td>
					</tr>
				</table>
			</td>
		</tr>

		<!-- 数据展示区 -->
		<tr valign="top">
			<td height="20">
				<table width="100%" border="1" cellpadding="5" cellspacing="0"
				       style="border:#c2c6cc 1px solid; border-collapse:collapse;">
					<tbody>
						<tr class="main_trbg_tit" align="center">
							<td><input type="checkbox" name="checkAll" id="checkAll"></td>
							<td>公告名称</td>
							<td>公告内容</td>
							<td>创建时间</td>
							<td>公告人</td>
							<td>操作</td>
							<td>预览</td>
						</tr>
					</thead>
					<tbody id="notice_data">
					</tbody>
				</table>
			</td>
		</tr>
		<!-- 分页标签 -->
		<tr valign="top">
			<td align="center" class="font3">
				<table width="100%" align="center" style="font-size:13px;" class="digg">
					<tbody>
						<tr>
							<td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">
								<button disabled="disabled" class="disabled" id="page_pre_btn" onclick="prePage()">上一页
								</button>
								<span class="current" id="page_num">1</span>
								<button id="page_next_btn" onclick="nextPage()">下一页</button>&nbsp;跳转到&nbsp;&nbsp;
								<input id="page_jump_num"
								       style="text-align: center;BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none"
								       type="number" size="2"/>&nbsp;
								<input type="button" onclick="page_jump()"
								       style="text-align: center;BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none"
								       value="确定"/>
							</td>
						</tr>
						<tr align="center">
							<td style="font-size:13px;"></td>
						</tr>
						<tr>
							<td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">
								总共<font color="red" id="data_count">2</font>条记录，当前显示<font color="red"
								                                                          id="data_count_start">2</font>-<font
								color="red" id="data_count_end">2</font>条记录。
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</table>
	<div style="height:10px;"></div>

	<script type="text/javascript">

		let pageStart = 1;
		let pageSize = 10;
		let noticeInfo = null;

		function search() {
			let annoTitle = $('#title').attr('value');
			let annoContent = $('#content').attr('value');
			noticeInfo = {
				"annoTitle": annoTitle.trim(),
				"annoContent": annoContent
			};
			pageInfo(noticeInfo, pageStart, pageSize)
		}

		function openDialog(id) {
			$.ligerDialog.open({
				title: '预览公告',
				height: 500,
				url: 'previewNotice.html?noticeId=' + id,
				width: 750,
				showMax: true,
				showToggle: true,
				showMin: true,
				isResize: true,
				slide: false
			});
		}


		$(function () {
			/** 获取上一次选中的职位数据 */
			let boxs = $("input[type='checkbox'][id^='box_']");

			/** 给数据行绑定鼠标覆盖以及鼠标移开事件  */
			$("tr[id^='data_']").hover(function () {
				$(this).css("backgroundColor", "#eeccff");
			}, function () {
				$(this).css("backgroundColor", "#ffffff");
			})

			/** 删除员工绑定点击事件 */
			$("#delete").click(function () {
				/** 获取上一次选中的职位数据 */
				boxs = $("input[type='checkbox'][id^='box_']");
				//console.log(boxs);
				/** 获取到职位选中的复选框  */
				let checkedBoxs = boxs.filter(":checked");
				if (checkedBoxs.length < 1) {
					$.ligerDialog.error("请选择一个需要删除的职位！");
				} else {
					/** 得到职位选中的所有的需要删除的ids */
					let ids = checkedBoxs.map(function () {
						return this.value;
					})

					/**
					 JSON.stringify 把一个对象转换成json字符串， JSON.stringify(array)
					 JSON.parse 把一个json字符串解析成对象。 JSON.parse(array)
					 */
					$.ligerDialog.confirm("确认要删除吗?", "删除职位", function (r) {
						if (r) {
							// 发送请求
							$.ajax({
								url: "/cai/anno/api/delete", // url where to submit the request
								type: "DELETE", // type of action POST || GET
								contentType: 'application/json;charset=UTF-8',
								dataType: "json",
								data: JSON.stringify(ids.get()),
								success: function (result) {
									console.log(result);
									let data;
									try {
										data = checkResultAndGetData(result);
									} catch (error) {
										console.log(error)
										alert(JSON.stringify(error));
										return;
									}
									console.log(data);
									if (data == null) {
										return;
									}
									pageInfo(noticeInfo, pageStart, pageSize);
								}
							});
							// window.location = "${ctx }/user/removeUser?ids=" + ids.get();
						}
					});
				}
			});
		});

		function checkResultAndGetData($result) {
			if ($result.success == false) {
				throw $result;
			}
			return $result.data;
		}

		function nextPage() {
			pageStart = pageStart + 1;
			pageInfo(noticeInfo, pageStart, pageSize);
		}

		function prePage() {
			pageStart = pageStart - 1;
			pageInfo(noticeInfo, pageStart, pageSize);
		}

		function page_jump() {
			let num = $('#page_jump_num').attr('value')
			pageStart = parseInt(num);
			pageInfo(noticeInfo, pageStart, pageSize);
		}

		$(document).ready(function () {
			// 初始展示列表
			pageInfo(noticeInfo, pageStart, pageSize);
		});

		function pageInfo(noticeInfo, pageStart, pageSize) {
			$.ajax({
				url: "/csi/anno/api/pageListByEntity/" + pageStart + "/" + pageSize, // url where to submit the request
				type: "GET", // type of action POST || GET
				data: noticeInfo,
				success: function (result) {
					// console.log(result);
					let data;
					try {
						data = checkResultAndGetData(result);
					} catch (error) {
						console.log(error)
						// alert(JSON.stringify(error));
						$.ligerDialog.error(JSON.stringify(error), "出错了，请于管理员联系");
						return;
					}

					console.log(data);
					if (data == null) {
						return;
					}

					// 当前页面开始记录数目
					$("#data_count_start").text(data.startRow);
					// 当前页面结束记录数
					$("#data_count_end").text(data.endRow);
					// 总计
					$("#data_count").text(data.total);
					// 当前页数
					$("#page_num").text(data.pageNum);
					if (data.isFirstPage == true) {
						$("#page_pre_btn").attr("disabled", "disabled")
					} else {
						$("#page_pre_btn").removeAttr("disabled");
					}

					if (data.isLastPage == true) {
						$("#page_next_btn").attr("disabled", "disabled")
					} else {
						$("#page_next_btn").removeAttr("disabled");
					}

					// 渲染页面
					let list = data.list;
					if (list.length > 0) {
						let content = '';
						$('#notice_data').empty();
						for (let i in list) {
							content = content + '<tr id="data_' + list[i].id + '" align="center" class="main_trbg" style="background-color: rgb(255, 255, 255);"><td>' +
								'<input type="checkbox" id="box_' + list[i].id + '" value="' + list[i].id + '"></td>' +
								'<td>' + list[i].annoTitle + '</td>' +
								'<td>' + list[i].annoContent + '</td>' +
								'<td>' + list[i].createTime + '</td>' +
								'<td>' + list[i].createBy + '</td>' +
								'<td align="center" width="40px;"><a href="showUpdateNotice.html?noticeId=' + list[i].id + '"><img title="修改" src="../images/update.gif"></a>' +
								'</td>' +
								'<td align="center" width="40px;">' +
								'<button onclick="openDialog(' + list[i].id + ')" id="prev_' + list[i].id + '">' +
								'<img title="预览" src="../images/prev.gif"></button>' +
								'</td>'
						}
						$('#notice_data').append(content);
					} else {
						$('#notice_data').empty();
					}
				}
			});
		}
	</script>
</body>
</html>